@mixin transition-fix() {
  -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
}

@mixin circle($radius) {
  width: $radius;
  height: $radius;
  -webkit-border-radius: $radius / 2;
     -moz-border-radius: $radius / 2;
          border-radius: $radius / 2;
}

@mixin flip($flip) {
  -webkit-transform: scale($flip);
     -moz-transform: scale($flip);
      -ms-transform: scale($flip);
       -o-transform: scale($flip);
          transform: scale($flip);
}

@mixin ellipsis($ellipsis-width) {
  overflow: hidden;
  width: $ellipsis-width;
  white-space: nowrap;
      text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

@mixin button-primary-variant($color, $background, $border) {
  $active-background: $primary-hover;
  $active-border: $primary-hover;
  color: $color;
  border-color: $border;
  background-color: $background;
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
  @include hover {
    color: $color;
    border-color: $active-border;
    background-color: $active-background;
  }
  &:focus,
  &.focus,
  &:hover {
    color: $white;
    border-color: $active-border;
    background-color: $active-background;
  }
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $white;
    border-color: $active-border;
    background-color: $active-background;
    // Remove the gradient for the pressed/active state
    background-image: none;
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
    &:hover,
    &:focus,
    &.focus {
      color: $white;
      border-color: lighten($active-border, 8%);
      background-color: lighten($active-background, 8%);
    }
  }
  &.disabled,
  &:disabled {
    @include hover {
      border-color: $border;
      background-color: $background;
    }
    &:focus,
    &.focus {
      border-color: $border;
      background-color: $background;
    }
  }
}

@mixin button-outline-primary-variant($color) {
  color: $color;
  border-color: $color;
  background-color: transparent;
  background-image: none;
  @include hover {
    color: #ffffff;
    border-color: $primary-color;
    background-color: $primary-color;
  }
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: #ffffff;
    border-color: $primary-color;
    background-color: $primary-color;
  }
  &.active {
    &:hover,
    &:focus,
    &.focus {
      color: $white;
      border-color: darken($primary-color, 8%);
      background-color: darken($primary-color, 8%);
    }
  }
  &.disabled,
  &:disabled {
    @include hover {
      border-color: lighten($color, 20%);
    }
    &:focus,
    &.focus {
      border-color: lighten($color, 20%);
    }
  }
}

@mixin button-outline-inverted-variant($color) {
  color: $white;
  border-color: $color;
  background-color: $color;
  background-image: $color;
  @include hover {
    color: $color;
    border-color: $color;
    background-color: transparent;
  }
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    border-color: $color;
    background-color: transparent;
  }
  &.disabled,
  &:disabled {
    @include hover {
      border-color: lighten($color, 20%);
    }
    &:focus,
    &.focus {
      border-color: lighten($color, 20%);
    }
  }
}
